<template>
  <div class="project-list-wrapper">
    <!-- <div class="module-name">项目列表</div> -->
    <div class="search-bar">
      <el-form ref="formRef" size="mini" :model="filters" label-width="150px">
        <el-row :gutter="24" class="filters-row-box">
          <el-col :span="8">
            <el-form-item label="项目编号：">
              <el-input
                style="width: 80%"
                clearable
                placeholder="请输入"
                maxlength="30"
                v-model.trim="filters.projectCode"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目名称：">
              <el-input style="width: 80%" clearable placeholder="请输入" maxlength="30" v-model="filters.projectName">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="注册类项目：">
              <el-select v-model="filters.registerProject" placeholder="请选择">
                <el-option v-for="item in projectTypeList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="filters-row-box" :span="24" style="display: flex; align-items: center; justify-content: center">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch">查询</el-button>
          <el-button type="default" size="mini" icon="el-icon-refresh" @click="handleResent">重置</el-button>
          <column-control
            v-model="tableColumns"
            size="mini"
            style="margin-left: 8px; margin-right: 8px"
          ></column-control>
          <el-button
            v-if="permissionController('project::manage::add')"
            type="primary"
            size="mini"
            icon="el-icon-circle-plus-outline"
            @click="handleAdd"
            >新增</el-button
          >
          <el-upload
            action
            style="margin-left: 8px"
            :http-request="handleImportDatabase"
            :file-list="fileList"
            :show-file-list="false"
          >
            <el-button type="primary" size="mini" icon="el-icon-upload" :loading="importLoading"
              >导入项目数据库定义</el-button
            >
          </el-upload>
        </el-row>
      </el-form>
    </div>
    <div class="details-layout">
      <el-table
        :data="projectList"
        stripe
        style="width: 100%"
        size="mini"
        row-key="id"
        :header-cell-style="{ background: 'rgba(117, 60, 202, 0.04)' }"
        :tree-props="{ children: 'children' }"
      >
        <template v-for="(column, index) in tableColumns">
          <el-table-column
            v-if="column.visible"
            :width="column.width"
            :key="index"
            :min-width="column.minWidth"
            :label="column.name"
            :show-overflow-tooltip="true"
            align="center"
            :sortable="column.sortable"
            :sort-method="column.customSort"
          >
            <template slot-scope="scope">
              <div v-if="column.key === 'operate'">
                <el-button size="mini" type="text" @click="handleJumpPage(scope.row)">配置</el-button>
                <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
              </div>
              <div v-if="column.key === 'registerProject'">
                <span>{{ scope.row[column.key] === '1' ? '是' : '否' }}</span>
              </div>
              <span v-else>{{ scope.row[column.key] }}</span>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.pageNo"
          :page-sizes="[10, 20, 50]"
          :page-size="pagination.pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
      <add-record
        :dialogVisible="dialogVisible"
        :dialogTitle="dialogTitle"
        :editData="editData"
        @handleCancel="handleCancel"
      ></add-record>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import addRecord from './component/add-project.vue'
import { projectTypeList, projectHeaders } from './data'
import routes from '@/router/users-manage'
import { permissionController } from '@/utils/index'

export default {
  name: 'users-manage',
  components: {
    addRecord,
  },

  data() {
    return {
      projectTypeList,
      dialogVisible: false,
      dialogTitle: '',
      editData: {},
      projectList: [],
      tableColumns: projectHeaders,
      filters: {
        registerProject: '',
        projectCode: '',
        projectName: '',
      },
      pagination: {
        pageSize: 10,
        pageNo: 1,
      },
      total: 0,
      fileList: [],
      importLoading: false,
    }
  },

  mounted() {
    this.getProjectList()
  },

  methods: {
    permissionController,
    ...mapActions('projectList', ['qryProjectList', 'deleteProject', 'importProjectDatabase']),

    // 查询列表
    getProjectList() {
      const params = {
        ...this.pagination,
        ...this.filters,
      }
      this.qryProjectList({ params }).then(res => {
        const { data, code } = res
        if (code === 200) {
          this.projectList = data.records || []
          this.total = data.total || 0
        }
      })
    },

    // 导入项目数据集
    handleImportDatabase(file) {
      this.importLoading = true
      const formData = new FormData()
      formData.append('file', file.file)

      this.importProjectDatabase({ data: formData })
        .then(res => {
          this.importLoading = false
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '导入成功' + res.message,
            })
            this.fileList.push({ name: file.file.name, url: res.data })
            this.getProjectList()
          } else {
            this.$message({
              type: 'error',
              message: '导入数据失败，请稍后重试~',
            })
          }
        })
        .catch(error => {
          this.$message.error(error)
        })
    },

    // 跳转页面
    handleJumpPage(record) {
      localStorage.setItem('showMenuType', 3)
      localStorage.setItem('sys-project-id', record.id)
      this.$store.commit('layoutHeader/setSysProjectCode', record.projectCode)
      this.$router.push({
        path: routes.DatabaseVersion.path,
        name: routes.DatabaseVersion.name,
        query: {
          id: record.id,
        },
      })
    },

    // 添加
    handleAdd() {
      this.dialogVisible = true
      this.editData = {
        sponsorType: '1',
      }
      this.dialogTitle = '新建项目'
    },

    // 编辑
    handleEdit(record) {
      this.dialogTitle = '编辑项目信息'
      this.dialogVisible = true
      this.editData = { ...record, sponsorType: record.sponsorType + '' }
    },

    // 关闭弹框
    handleCancel(type) {
      this.dialogVisible = false
      if (type === 'refresh') {
        // 是刷新列表
        this.getProjectList()
      }
    },

    // 分页pageSize change事件
    handleSizeChange(size) {
      this.pagination.pageSize = size
      this.getProjectList()
    },

    // 分页
    handleCurrentChange(index) {
      this.pagination.pageNo = index
      this.getProjectList()
    },

    // 重置并重新查询列表
    handleResent() {
      this.filters = {
        registerProject: '',
        projectCode: '',
        projectName: '',
      }
      this.pagination.pageNo = 1
      this.getProjectList()
    },

    // 查询操作
    handleSearch() {
      this.pagination.pageNo = 1
      this.getProjectList()
    },

    // 删除
    handleDelete(row) {
      const params = {
        id: row.id,
      }
      this.$confirm('确定删除该条数据吗？', '删除提示', {
        type: 'warning',
      }).then(res => {
        this.deleteProject({ params }).then(res => {
          if (res.code === 200) {
            this.$message({ message: '删除成功', type: 'success' })
            this.getProjectList()
          }
        })
      })
    },
  },
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
